<template>
	<view>
		<view class="top_img">
			<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/rebcg.png" mode=""></image>
			<view class="imgads">
				<view class="price">
					{{ dataInfo.amountTotal }}
					<text>元</text>
				</view>
				<view class="price_s flex">
					<view class="t1">
						今日：
						<text>{{ dataInfo.amountDay }}</text>
					</view>
					<view class="t1">
						本月：
						<text>{{ dataInfo.amountMonth }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="top_fixed flex">
			<view class="itm" v-for="(item, index) in data.tabbarList" :key="index" :class="index == data.active ? 'actitm' : ''" @click="tabbarChange(item, index)">
				{{item.name}}
			</view>
		</view>
		<loadstatusVue :status="data.loadStatus">
			<view class="content">
				<view class="item flex_jc_sb" v-for="(item, index) in data.list" :key="index">
					<view class="item_l">
						<view class="t1">{{ item.title }}</view>
						<view class="flex">
							<image v-if="item.fromUser.img" :src="item.fromUser.img" mode="aspectFill"></image>
							<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode=""></image>
							<view class="t2">{{ item.fromUser.name }}</view>
							<view class="t3">{{ item.fromUser.vipNumber }}</view>
						</view>
						<view class="time">{{ item.createTime }}</view>
					</view>
					<view class="item_r">
						<view class="price">{{ item.symbol }}{{ item.amount }}</view>
						<view class="btn" v-if="item.canConfirm && item.confirmEnd == 0" @click="handleConfirm(item)">确认</view>
						<view class="btn btn1" v-if="!item.canConfirm">在途</view>
						<view class="btn btn2" v-if="item.confirmEnd == 1">已确认</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { incomeList, incomeData, incomeConfirm } from '@/api/branch/revenue.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	tabbarList: [
		{
			name: '全部',
			timeType: 0
		},
		{
			name: '今日',
			timeType: 1
		},
		{
			name: '本月',
			timeType: 2
		}
	],
	active: 0,
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		timeType: 0,
		pageNum: 1,
		pageSize: 10
	}
});
const tabbarChange = (item, e) => {
	data.active = e;
	data.queryParams.timeType = item.timeType;
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await incomeList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const dataInfo = reactive({
	amountDay: 0,
	amountMonth: 0,
	amountTotal: 0
});
const getInfo = () => {
	incomeData({}).then((res) => {
		if (res.code == 200) {
			Object.assign(dataInfo, res.data);
		}
	});
};
const handleConfirm = (item) => {
	showConfirm('收益到钱包?').then((res) => {
		if (res.confirm) {
			incomeConfirm({ id: item.id }).then((res) => {
				if (res.code == 200) {
					toast('收益已确认')
					data.queryParams.pageNum = 1; // 重置页码
					getList();
				}
			});
		}
	});
};
const loadMore = () => {
  if (data.isLoading || !data.hasMore) {
    return false;
  }
  data.queryParams.pageNum++;
  getList(true); // 传递 true 表示是加载更多
  return true;
};
defineExpose({
	loadMore
});
onMounted(() => {
	getInfo();
	getList();
});
</script>
<style lang="scss" scoped>
.top_img {
	width: 710rpx;
	height: 140rpx;
	position: relative;
	margin: 0rpx auto;
	image {
		display: block;
		width: 710rpx;
		height: 140rpx;
	}
	.imgads {
		width: 710rpx;
		height: 140rpx;
		position: absolute;
		top: 0%;
		padding: 26rpx 30rpx;
		box-sizing: border-box;
		.price {
			font-family: 'DIN-BOLD';
			font-weight: bold;
			font-size: 40rpx;
			color: #75613e;
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
			}
		}
		.price_s {
			margin-top: 10rpx;
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				margin-right: 52rpx;
				text {
					font-family: 'DIN-BOLD';
					font-weight: 500;
					font-size: 28rpx;
					color: #75613e;
				}
			}
		}
	}
}
.top_fixed {
	width: 750rpx;
	height: 70rpx;
	background: #f3f0e8;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	position: sticky;
	top: 70rpx;
	z-index: 3;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.itm {
		width: 112rpx;
		height: 36rpx;
		background: #f3f0e8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 1px solid #b1b1b1;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #b1b1b1;
		line-height: 36rpx;
		text-align: center;
		margin-right: 30rpx;
	}
	.actitm {
		color: #b19561;
		background: #f3f0e8;
		border: 1px solid #b19561;
	}
}
.content {
	.item {
		width: 710rpx;
		height: 160rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
		margin: 0rpx auto 20rpx;
		.item_l {
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
				margin-bottom: 8rpx;
			}
			image {
				width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
			}
			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
				margin: 0rpx 10rpx;
			}
			.t3 {
				height: 28rpx;
				background: rgba(216, 198, 167, 0.5);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #75613e;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
				line-height: 28rpx;
				padding: 0rpx 10rpx;
			}
			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8f8f8b;
				margin-top: 10rpx;
			}
		}
		.item_r {
			text-align: right;
			.price {
				font-family: 'DIN-BOLD';
				font-weight: 500;
				font-size: 40rpx;
				color: #75613e;
			}
			.btn {
				width: 96rpx;
				height: 40rpx;
				background: #d8c6a7;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				text-align: center;
				line-height: 40rpx;
				margin-top: 10rpx;
				border: 1px solid #d8c6a7;
			}
			.btn1 {
				border: 1px solid #c7b189;
				color: #c7b189;
				background-color: transparent;
			}
			.btn2 {
				border: 1px solid #ECE6D5;
				color: #C7B189;
				background: #ECE6D5;
			}
		}
	}
}
</style>
